{% extends '_base.html' %}
{% load i18n %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}首页{% endblock %}
    </title>
    {% block custom_style %}
        <link href="{% static 'index.css' %}" rel="stylesheet">
    {% endblock %}
</head>
<body>
{% block main %}
    <div class="outline-container">
        <div>
            {% if request.user.is_authenticated %}
                <ul class="outline-tree">
                    {% for outline in all_outline_list %}
                        <li class="outline-item">
                            <span>{{ outline.name }}</span>
                            <ul class="secene-tree">
                                {% for secene in all_secene_list %}
                                    {% if secene.outline.id == outline.id %}
                                        <li class="secene-item"><a
                                                href="{% url 'outlines:secene' secene.id -1 -1 %}">{{ secene.title }}</a></li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
            {% if not request.user.is_authenticated %}
                <h2 style="text-align: center;">请点击右上角登录进行查看</h2>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block custom_script %}
    <script>
        $(function () {
            $(".outline-item").click(function () {
                if ($(this).hasClass("outline-active")) {
                    return false;
                }
                $(".outline-item").removeClass("outline-active");
                $(".secene-tree").slideUp();
                $(this).addClass("outline-active").children(".secene-tree").slideDown();
            });
            $(".secene-item").click(function (event) {
                event.stopPropagation();
            });
        });
    </script>
{% endblock %}
</body>
</html>